/* 
    Document   : style.theme.css
    Created on : Jun 27, 2012, 4:33:31 PM
    Author     : mirza
    Description:
        Purpose of the stylesheet follows.
*/

body {
    font-family: "Helvetica", "Arial"; font-size: 13px;
    padding:0px; margin:0px;

}

#canvas {
    width:100%;
    background: url(../images/bg.jpg) center top repeat;
    top:0px; padding: 0px; margin: 0px;
}

#Header {
    height: 245px; width:100%;
}

#Header #Header-Container {
    width: 1000px; margin: auto;
} 

.Header-ButtonHover {
    position: absolute; margin: auto; margin-top:-17px;
    display:none;
}

#Header #Header-Container #banner {
    height: 201px; top:0px;
    position: absolute;
}

#Header #Header-Container #Menu {
    top:179px; margin-left: 15px;
    position: absolute;
}
#Menu #Menu-Button {
    cursor: pointer;
}

#Menu #Menu-List {
    background: url(../images/header-menu-container.png) center top repeat-y;
    display: none;
}
#Menu #Menu-List ul {
    padding:0px; margin:0px; 
    padding-top: 30px; margin-left: 18px
}

#Menu #Menu-List ul li.title {
    padding: 5px;
    list-style: none;
    width: 236px;
    border:none; border-bottom: 2px solid #333;
    cursor: pointer;
}
#Menu #Menu-List ul li.title h3:hover {
    text-shadow: 0.15em 0.15em 0.2em rgba(0, 0, 0, 0.0);
}

#Menu #Menu-List ul li.title.last {
    border: none;
}

#Menu #Menu-List ul li.title h3 {
    color: #fff; text-shadow: 0.15em 0.15em 0.2em rgba(0, 0, 0, 0.8); text-align: center; 
    margin: 0px 0px; padding: 10px;
}


#Menu #Menu-List ul li.title ul {
    padding:0px 15px 0px 10px; margin: 0px;
    display: none;
    
}

#Menu #Menu-List ul li.title ul li {
    padding: 10px 5px;
    list-style: none; font-weight: bold;
    width: 100%;
    color: #ccc; text-shadow: 0.2em 0.2em 0.25em rgba(0, 0, 0, 0.8);
    border:none; border-bottom: 2px dotted #333;
    cursor: pointer;
}

#Menu #Menu-List ul li.title ul li:hover {
    text-shadow: 0.2em 0.2em 0.25em rgba(0, 0, 0, 0);
}

#Menu #Menu-List ul li.title ul li.last {
    border: none;
}


#Header #Header-Container #Notification {
    top:194px; margin-left: 297px;
    position: absolute;
}



#Notification #Notification-Button {
    cursor: pointer; width: 695px; height: 43px;
    background: url(../images/header-notification-button.png) center no-repeat;
}

#Notification #Notification-Button #Notification-Highlight {
    padding: 8px 25px; margin:0px; 
    height: 25px;
    color: #fff;
}

#Notification-Highlight li.Notification  {
    float:left; 
    width: 50%;
    list-style: none; overflow: hidden;
}

#Notification-Highlight.Notification li  span{
    float:left; margin-right: 10px; 
}


#Notification-Highlight #UserInfo {

}

#newsticker-jcarousellite {
    text-align: right; font-style: italic;
    width: 305px;
    padding: 0px 5px;
}

#Notification #Notification-Container {
    background: url(../images/header-notification-container.png) center top repeat-y;
    padding:10px 20px;
    display: none;
}

#Notification #Notification-Container p {
    margin:0px
}

#Shortcut {
    position:absolute; margin-top: -0px;
    margin-left:510px; height: 50px;
}
#Shortcut li {
    float:left;
    list-style: none; padding: 10px 5px;
}

#banner #version {
    position: absolute; top:10px; margin-left: 130px;
}

#Page {
    width:100%;    
}

#Page #Page-Container {
    width:1000px;
    margin:auto; 
}

#Page #Page-Container #Page-top {
    width:100%; height: 32px; margin:auto;
    background: url(../images/page-top.png) center top no-repeat;
}
#Page #Page-Container #Page-main {
    min-height: 320px;
    background: url(../images/page-main.png) center top repeat-y;
    padding: 10px 35px;
}

#Page #Page-Container #Page-main div {
    
}
#Footer {
    background: url(../images/Footer.png) center top repeat-x;
    height: 50px;
}
#Footer #Footer-Container {
    width: 1000px; padding:10px; margin:auto;
}
#Footer #Footer-Container p {
    color:#fff; text-align: right;
    padding:0px; margin: 0px
}


.WarningMessage-Container {
    border:3px solid #000; background: #ff0000;
    padding: 15px; margin-bottom: 30px;
    -moz-border-radius-topleft: 6px/*{cornerRadius}*/; -webkit-border-top-left-radius: 6px/*{cornerRadius}*/; border-top-left-radius: 6px;
    -moz-border-radius-topright: 6px/*{cornerRadius}*/; -webkit-border-top-right-radius: 6px/*{cornerRadius}*/; border-top-right-radius: 6px;
    -moz-border-radius-bottomleft: 6px/*{cornerRadius}*/; -webkit-border-bottom-left-radius: 6px/*{cornerRadius}*/; border-bottom-left-radius: 6px;
    -moz-border-radius-bottomright: 6px/*{cornerRadius}*/; -webkit-border-bottom-right-radius: 6px/*{cornerRadius}*/; border-bottom-right-radius: 6px;
}

.WarningMessage-Container .Title {
    font-size: 22px; font-weight: bold; text-align: center;
    text-shadow: 0.1em 0.1em 0.15em rgba(0, 0, 0, 0.5); 
    padding-bottom: 5px; border-bottom: 2px #000 solid;
    color: #000;
}

.WarningMessage-Container .Content {
    padding-top: 10px;
    font-size: 16px; font-weight: bold; text-align: center;
}


.ErrorMessage-Container {
    border:3px solid #000; background: #ffff00;
    padding: 15px; margin-bottom: 30px;
    -moz-border-radius-topleft: 6px/*{cornerRadius}*/; -webkit-border-top-left-radius: 6px/*{cornerRadius}*/; border-top-left-radius: 6px;
    -moz-border-radius-topright: 6px/*{cornerRadius}*/; -webkit-border-top-right-radius: 6px/*{cornerRadius}*/; border-top-right-radius: 6px;
    -moz-border-radius-bottomleft: 6px/*{cornerRadius}*/; -webkit-border-bottom-left-radius: 6px/*{cornerRadius}*/; border-bottom-left-radius: 6px;
    -moz-border-radius-bottomright: 6px/*{cornerRadius}*/; -webkit-border-bottom-right-radius: 6px/*{cornerRadius}*/; border-bottom-right-radius: 6px;
}

.ErrorMessage-Container .Title {
    font-size: 16px; font-weight: bold; text-align: center;
    text-shadow: 0.1em 0.1em 0.15em rgba(0, 0, 0, 0.5); 
    padding-bottom: 5px; border-bottom: 2px #000 solid;
    color: #000;
}

.ErrorMessage-Container .Content {
    padding-top: 10px; text-align: justify; 
}


.ErrorHandler-Container {
    padding: 10px 20px;
    font-style: italic; color: #FF0000;
    border:none; border-bottom: 1px solid #ff0000;
    display:none;
}

/*KETERANGAN*/
.Keterangan-Container {
    font-style: italic;
}

.SMSRetrieval-Container.SMSReceived {
    color: #ffff00;
}

.FieldSupport {
    width: 1px; height:1px; overflow:hidden; position: absolute; 
}